<template>
    <div class="header-box">
         <ul>
            <li>关注 </li>
            <li>推荐 </li>
            <li>TOP精选</li>
            <li>英语 </li>
        </ul>
        <div class="sousuo">

            <span>
                <i class="iconfont icon-sousuo"></i>
               23考研
            </span>
        </div>
    </div>    
</template>

<script>
export default {
    name:"Header",
    data(){
        return {
          
        }
    }
}
</script>

<style scoped>


.header-box{
    height: 1.1rem;   
    padding:0 .16rem;
    margin: 0.1rem auto;
    /* display: flex; */
    justify-content: space-between;
    align-items: center;
}
.header-box ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.22rem;    
    /* width: 3.35rem; */
    margin:  .17rem  0;
    color: #c8c8c8;
}
.header-box ul li{
   margin-right:0.23rem;
}
.header-box ul li:hover{
    font-weight: bold;
   color: #000;

}
.header-box .sousuo{
    width: 3.2rem;
    height: .37rem;
    background: #f4f4f4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .12rem;
    padding: 0 .1rem;
    margin: 0.1rem auto;
    color: #c8c8c8;
    border-radius: 10px;
}


</style>
